import React from 'react'
import { Skeleton, Card, Button, Typography, Table } from 'antd'
import { CheckCircleOutlined, HomeOutlined } from '@ant-design/icons'
import { ColumnsType } from 'antd/es/table'
import { useNavigate } from 'react-router-dom'

const { Meta } = Card
const { Title, Text } = Typography

interface OrderItem {
  key: number
  item: string
  amount: string | number | JSX.Element
}

const columns: ColumnsType<OrderItem> = [
  {
    title: '产品',
    dataIndex: 'item',
    key: 'item',
  },
  {
    title: '价格',
    dataIndex: 'amount',
    key: 'amount',
  },
]

interface PropsType {
  loading: boolean
  order: any
  onCheckout: () => void
}

export const CheckOutCard: React.FC<PropsType> = ({
  loading,
  order,
  onCheckout,
}) => {
  const Navigate = useNavigate()

  const order1 = {
    code: 20000,
    message: '查询成功',
    state: 'Completed',
    userId: '123',
    paging: 1,
    title: '该力越院六道清验被常火持况向北装。',
    shoppingCartId: '123',
    originalPrice: 666,
    discountPresent: 0.1,
    rating: 3.5,
    description: '比走使革是展本以各需月况。',
    orderItems: [
      {
        id: '25',
        touristRoute: {
          id: '25',
          title: '往级价组头明例拉意压制史每适展步算没。',
          description: '和断过以动到高建采党调科则作布江们第。',
          price: 23,
          originalPrice: 666,
          discountPresent: 0.1,
          rating: 3.5,
          travelDays: 'EightPlus',
          trvalType: 'hot',
          departureCity: 'beijing',
          createTime: '0001-01-01',
          updateTime: null,
          departureTime: null,
          touristRoutePictures: [
            {
              url: 'https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg',
            },
            {
              url: 'https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg',
            },
            {
              url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg',
            },
          ],
        },
      },
    ],
  }

  const paymentData: any = order
    ? order?.orderItems?.map((i: any, index: any) => ({
        key: index,
        item: i.touristRoute.title,
        amount: (
          <>
            <Text delete>¥ {i.touristRoute.originalPrice} </Text>{' '}
            <Text type="danger" strong>
              ¥ {i.touristRoute.originalPrice * i.touristRoute.discountPresent}
            </Text>
          </>
        ),
      }))
    : order1?.orderItems?.map((i: any, index: any) => ({
        key: index,
        item: i.touristRoute.title,
        amount: (
          <>
            <Text delete>¥ {i.touristRoute.originalPrice} </Text>{' '}
            <Text type="danger" strong>
              ¥ {i.touristRoute.originalPrice * i.touristRoute.discountPresent}
            </Text>
          </>
        ),
      }))

  return (
    <Card
      style={{ width: 600, marginTop: 50 }}
      actions={[
        order && order.state === 'Completed' ? (
          <Button
            type="primary"
            onClick={() => {
              Navigate('/')
            }}
            loading={loading}
          >
            <HomeOutlined />
            回到首页
          </Button>
        ) : (
          <Button type="primary" danger onClick={onCheckout} loading={loading}>
            <CheckCircleOutlined />
            支付
          </Button>
        ),
      ]}
    >
      <Skeleton loading={loading} active>
        <Meta
          title={
            <Title level={2}>
              {order && order.state === 'Completed' ? '支付成功' : '总计'}
            </Title>
          }
          description={
            <Table<OrderItem>
              columns={columns}
              dataSource={paymentData}
              showHeader={false}
              size="small"
              bordered={false}
              pagination={false}
            />
          }
        />
      </Skeleton>
    </Card>
  )
}
